<template>
	<el-input v-model.number="searchData.stuName" placeholder="请输入姓名" />
	<el-input v-model="searchData.stuNum" placeholder="请输入学号" />
	<el-button @click="searchFn" class="searchBtn" type="info" :icon="Search">搜索</el-button>
	<div style="float: right;">
		<el-button @click="finishFn" class="greenBtn" type="info">完成</el-button>
		<span @click="back" style="cursor: pointer;">返回</span>
	</div>
	<div v-if="showTable">
		<el-table @selection-change="handleSelectionChange" ref="multipleTableRef"
			:data="tableData" style="width: 100%" height="58vh">
			<el-table-column type="selection" align="center"></el-table-column>
		    <el-table-column prop="stuName" label="姓名" align="center"/>
			<el-table-column prop="stuNum" label="学号" align="center"/>
		    <el-table-column prop="stuSex" label="性别" align="center"/>
		    <el-table-column prop="stuPhone" label="联系方式" align="center"/>
		    <el-table-column prop="stuAge" label="年龄" align="center"/>
		</el-table>
		<el-pagination
			layout="prev,pager,next"
			:page-size="pageSize"
			:page-count="pageCount"
			v-model:current-page="pageIndex"
			@current-change="changePage"
		/>
	</div>
	<div v-else style="text-align: center;margin-top: 5vh;">未找到该学生</div>
	
</template>

<script setup>
	import { defineEmits,ref,reactive,shallowRef, defineProps,onMounted} from 'vue';
	import {Search,CirclePlus} from '@element-plus/icons-vue'
	import {StudentDetail,ShiftAdd,StudentShowList,SearchStudent} from "../api/wym"
	import { ElMessage,ElMessageBox} from 'element-plus'
	
	const props = defineProps({
		addclassid: String
	});
	// console.log(props.addclassid)
	
	const pageSize=7;
	let pageCount = shallowRef(0)
	const pageIndex=shallowRef(1);//当前的页数
	let showTable=ref(true)
	// 搜索
	let searchData=reactive({
		stuName:'',
		stuNum:"",
		pageSize:pageSize,
		pageIndex:pageIndex.value,
	})
	// 点击搜索
	const searchFn=async()=>{
		// searchData.pageIndex=pageIndex.value
		// console.log(searchData)
		let res=await SearchStudent(searchData)
		// console.log("搜索",res)
		if(res){
			showTable.value=true
			tableData.value=res.data
			pageCount.value=Math.ceil(Number(res.a/pageSize))
		}else{
			showTable.value=false
		}
		
	}
	
	// 点击完成
	let multipleTableRef = ref()
	let multipleSelection = ref([])
	let changeId=ref([])
	let teaData=reactive({
		classId:""
	})
	let handleSelectionChange = (val) => {
		multipleSelection.value = val
		// console.log("val",multipleSelection.value)
	}
	
	// 点击完成
	const finishFn=async()=>{
		multipleSelection.value.forEach(row=>{
			changeId.value.push(row.stuId)
		})
		// console.log("添加学生id",changeId.value)
		if(changeId.value.length==0){
			ElMessage({
				message:"请先选择学生",
				type:'warning'
			})
		}else{
			let res=await ShiftAdd({
				clazzId:Number(props.addclassid),
				liststuId:changeId.value
			})
			// console.log(res)
			if(res===undefined){
				emit('changeShow');
				ElMessage.success({
					message:"添加成功"
				})
			}else{
				ElMessage.error({
					message:"添加失败"
				})
			}
		}
	}
	
	let tableData=ref([])
	const studentShowList=async()=>{
		let res=await StudentShowList({
			pageSize:pageSize,
			pageIndex:pageIndex.value,
		})
		// console.log("学生列表2",res)
		tableData.value=res.data
		pageCount.value=Math.ceil(Number(res.a/pageSize))
	}

	//点击分页
	const changePage=(page)=>{
		searchData.pageIndex=page;
		// console.log(searchData.pageIndex)
		searchFn();
	}
	
	// 点击返回
	const emit = defineEmits(['changeShow']);
	const back=()=>{
		emit('changeShow');
	}
	
	onMounted(()=>{
		studentShowList()
	})
</script>

<style scoped lang="less">
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.greenBtn{
		background-color: #10b008;
		margin-right: 7px;
		border: none;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	/* 表格距顶部的距离 */
	.el-table{
		margin-top: 20px;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-bg-color:none !important;	
		--el-table-header-bg-color:#f3f8fd;
		--el-table-header-text-color:#333 !important
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
	  -webkit-border-vertical-spacing: 9px;
	}
	// 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
</style>